<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>余额查询</title>
    <link rel="stylesheet" href="/static/style.css">
    <style>
        .container { max-width: 600px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(45,140,240,0.10); padding: 30px 40px; }
        h2 { color: #2d8cf0; margin-bottom: 20px; }
        table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
        th, td { padding: 12px 8px; text-align: center; background: #f7fafd; border-radius: 8px; }
        th { background: #eaf4fd; color: #2d8cf0; }
        tr:hover td { background: #f0f8ff; }
        .btn-detail { background: #2d8cf0; color: #fff; border: none; border-radius: 5px; padding: 6px 18px; cursor: pointer; font-size: 15px; }
        .btn-detail:hover { background: #1a6fb3; }
    </style>
</head>
<body>
    <div class="container">
        <h2>余额查询</h2>
        <table>
            <tr>
                <th>卡号</th>
                <th>余额</th>
                <th>操作</th>
            </tr>
            {% for card in cards %}
            <tr>
                <td>{{ card.cardID }}</td>
                <td>{{ card.balance }}</td>
                <td>
                    <a href="/customer/transactions?card_id={{ card.cardID }}" class="btn-detail">查看明细</a>
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
</body>
</html> 